<template class="bg-white">
	<view class="bg-white" style="text-align: center;">
				
				<view class="cu-card" >
					<view class="cu-item bg-img" 
					:style="[{backgroundImage:'url(https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg)'}]"  
					data-url="../plugin/drawer" style="background-color: #FFFFFF;">
						<view class="cardTitle">
							终身学习分享群周打卡
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white" style="text-align: center;">
					<text style="margin-left: 350rpx;">登录</text>
				</view>
				<view class="margin-bottom padding-xl">
					<input  placeholder="请输入用户名" name="nickName" data-tag="nickName" v-model="nickName" />
				</view>
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="cancel"></view>
					<view class="action text-green" @tap="savenickName">确定</view>
				</view>
		</view>
</template>

<script>
	export default {
		name:'login',
		data() {
			return {
				
			}
		},
		methods: {
			savenickName(){
				if(!this.nickName||this.nickName.trim()===''){
					return;
				}
				uni.setStorageSync('nickName',this.nickName)
				this.modalName = "";
				uni.navigateTo({
					url: '/pages/index/index',
				});
			},
			cancel(){
				uni.navigateTo({
					url: '/pages/index/index',
				});
			}
		}
	}
</script>

<style>

	.cardTitle {
		color: #fff;
		padding: 90upx 60upx;
		font-size: 40upx;
		font-weight: 300;
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	
	.cardTitle::before {
		content: "";
		position: absolute;
		width: 60upx;
		height: 6upx;
		border-radius: 20upx;
		background-color: #fff;
		display: block;
		top: 60upx;
		left: 50upx;
		transform: skew(10deg, 0deg);
	}
	
	.cardTitle::after {
		content: "";
		position: absolute;
		width: 140upx;
		border-radius: 6upx;
		height: 24upx;
		background-color: #fff;
		display: block;
		bottom: 76upx;
		left: 90upx;
		transform: skew(10deg, 0deg);
		opacity: 0.1;
	}	
	.cu-item {
		background-color: #FFF;
	}
</style>
